<template>
    <div class="parent">
        <div class="header">
            <div class="column_one">
                <div class="row_one">
                    <text class="text">项目</text>
                </div>
                <div class="row_two">
                    <text class="text">市级责任单位</text>
                </div>
                <div class="row_three">
                    <text class="text">内容区属</text>
                </div>
            </div>
            <div class="column_two">
                <div class="columnTwo_row_one">
                    <text class="text">农村生活污水治理</text>
                </div>
                <div class="columnTwo_row_two">
                    <text class="text">市水务局</text>
                </div>
                <div class="columnTwo_row_three">
                    <text class="text">农村污水治理工程建设情况(个)</text>
                </div>
                <div class="columnTwo_row_four">
                    <div class="four_one">
                        <text class="text">污水得到有效治理的村庄数量</text>
                    </div>
                    <div class="four_one">
                        <text class="text">正在开展前期工作的村庄数量</text>
                    </div>
                    <div class="four_one">
                        <text class="text">已开工建设的村庄数量</text>
                    </div>
                    <div class="four_two">
                        <text class="text">已完成建设的村庄数量</text>
                    </div>
                </div>
            </div>
        </div>
        <scroller scroll-direction>
            <div class="cont">
                <div class="dataItem" v-for="(item, index) in datalist" :key="index">
                    <div class="contItem">
                        <text class="contText">{{item.XZQHMC}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.LDCZS}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.LDSL}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.JNDSL}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.XZCZS}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.XZLD}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.XZJND}}</text>
                    </div>
                </div>
            </div>
        </scroller>
    </div>
</template>
<script>
    export default {
        name: 'ljListCont',
        props: ['datalist'],
        created () {
            this.$notice.loading.show()
        },
        mounted () {
            this.$notice.loading.hide()
        }
    }
</script>
<style scoped>
    .parent{
        width: 750px;
    }
    .header{
        width: 750px;
        height: 488px;
        background-color: rgba(35,196,160,1);
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .column_one{
        width: 150px;
        height: 488px;
        border-right-color: #fff;
        border-right-style: solid;
        border-right-width: 2px;
    }
    .row_one{
        width: 150px;
        height: 50px;
        border-bottom-color: #fff;
        border-bottom-style: solid;
        border-bottom-width: 2px;
        justify-content: center;
        align-items: center;
    }
    .row_two{
        width: 150px;
        height: 100px;
        border-bottom-color: #fff;
        border-bottom-style: solid;
        border-bottom-width: 2px;
        justify-content: center;
        align-items: center;
        padding-left: 30px;
        padding-right: 30px;
    }
    .row_three{
        width: 150px;
        height: 358px;
        justify-content: center;
        align-items: center;
        padding-right: 3px;
    }
    .text{
        lines: 7;
        font-size:28px;
        font-family:PingFangSC-Semibold;
        color:rgba(255,255,255,1);
    }
    .column_two{
        width: 600px;
        height: 488px;
        border-right-color: #fff;
        border-right-style: solid;
        border-right-width: 2px;
    }
    .columnTwo_row_one{
        width: 600px;
        height: 50px;
        border-bottom-color: #fff;
        border-bottom-style: solid;
        border-bottom-width: 2px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .columnTwo_row_two{
        width: 600px;
        height: 100px;
        border-bottom-color: #fff;
        border-bottom-style: solid;
        border-bottom-width: 2px;
        justify-content: center;
        align-items: center;
    }
    .columnTwo_row_three{
        width: 600px;
        height: 80px;
        border-bottom-color: #fff;
        border-bottom-style: solid;
        border-bottom-width: 2px;
        justify-content: center;
        align-items: center;
    }
    .columnTwo_row_four{
        width: 600px;
        height: 258px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .four_one{
        width: 150px;
        height: 258px;
        border-right-color: #fff;
        border-right-style: solid;
        border-right-width: 2px;
        justify-content: center;
        align-items: center;
        padding-left: 2px;
    }
    .four_two{
        width: 150px;
        height: 258px;
        justify-content: center;
        align-items: center;
        padding-left: 2px;
    }
    .cont{
        width: 750px;
        padding-bottom: 96px;
    }
    .dataItem{
        width: 750px;
        height: 80px;
        border-bottom-color: #dddbdb;
        border-bottom-style: solid;
        border-bottom-width: 2px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: #F7FAFF;
    }
    .contItem{
        width: 150px;
        height: 80px;
        border-right-color: #dddbdb;
        border-right-style: solid;
        border-right-width: 2px;
        justify-content: center;
        align-items: center;
    }
    .contText{
        font-size: 24px;
        font-family:PingFangSC-Semibold;
        color: #333;
    }
</style>
